<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('认证数据分布')" />
</head>
<body class="gray-bg">
     <div class="container-div">
<!--        <div class="row">-->
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>日期：</label>
                                <input type="text" name="dateInfo" id="dateInfo" autocomplete="off"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="loadProvinceData();"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table ibox">
                <div class="ibox-title">
                    <label>查询时间：<span id="queryDateInfo" style="color: red"></span>；</label>
                </div>
                <div class="ibox-content height-full">
                    <div class="echarts height-full" id="echarts-map-chart"></div>
                </div>
            </div>
<!--        </div>-->
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var prefix = ctx + "member/extInfo";

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#dateInfo',
                type: 'date',
                range: '~',
                max: 0
            });
        });

        $(function() {
            loadProvinceData();
        });

        var mapChart = echarts.init(document.getElementById("echarts-map-chart"));


        function loadProvinceData(){
            var dateInfo = $("#dateInfo").val();
            var url = prefix + '/chartMap100CityData'
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "dateInfo": dateInfo
                },
                success: function(result) {
                    $.modal.msgSuccess("加载完成");

                    if (result.code == 0) {
                        var mapoption =  {
                            series: [
                                {
                                    type: 'treemap',
                                    data: result.data.dataList
                                }
                            ]
                        }

                        $("#queryDateInfo").text(result.data.queryDateInfo)

                        mapChart.setOption(mapoption);
                        $(window).resize(mapChart.resize);

                    }
                }
            });
        }

    </script>
</body>
</html>